<template>
	<view class="container">
		<!-- <view>
			<view>
				<view class="login-title">{{title}}</view>
				<view class="login">
					<view class="first-line">
						<input :disabled="isSend" placeholder-class="phcolor" class="tui-input" placeholder="请输入房间编码"
							 v-model="roomId" auto-focus />
					</view>
				</view>
				<view class="third-line">
					<tui-button type="danger" shape="circle" @click="bindLoginMobilecode">绑定</tui-button>
				</view>
			</view>
		</view> -->
		
		<view class="tui-product-container" style="margin-top: 20rpx;">
			<block v-for="(item, index) in roomList" :key="index">
				<!--商品列表-->
				<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
					:hover-start-time="150">
					<!-- <image :src="item.fileList[0].filePath?item.fileList[0].filePath:defaltImage" @error="imageError" class="tui-pro-img" mode="widthFix" /> -->
					<view class="tui-pro-content" style="margin: 2%;">
						<view :style="{color: item.statusName==='待派单'?'red':'green', fontSize:'30rpx'}"><span style="color: #444444; font-size: 30rpx;">工单状态：</span>{{ item.statusName }}</view>
						<text class="tui-pro-pay" style="color: #444444;font-size: 30rpx;"></text>
						<view>
							<view style="margin-bottom: 10rpx;">
								<text style="color: #444444;font-size: 30rpx;">添加时间：{{ item.addDate }} </text>
							</view>
							<view><text style="color: #444444;font-size: 30rpx;">报修人：{{item.userName}}</text></view>
							<view class="tui-pro-pay" style="color: #444444;font-size: 30rpx; margin-bottom: 20rpx;">报修地址：{{item.repairPlace}}</view>
							<!-- 报修图片 -->
							<view style="height: 120rpx;">
								<view v-if="item.fileList">
									<view v-for="(image, index) in item.fileList" :key="index" style="width: 100rpx; height: 100rpx;">
										<image :src="image.filePath?image.filePath:defaltImage" style="width: 100rpx; height: 100rpx;margin: 8rpx;"></image>
									</view>
								</view>
								<view v-else>
									<view style="width: 100rpx; height: 100rpx;">
										<image :src="defaltImage" style="width: 100rpx;height: 100rpx;"></image>
									</view>
								</view>
								
							</view>
							<!-- <tui-button width="80%" height="84rpx"  @click="addRepair(item)">接单</tui-button> -->
							<button style="background-color: #2ECC71; color: white;" @click="addRepair(item)">接单</button>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="bottom-btn align-center" style="border: 0;">
				<tui-button width="750rpx" height="84rpx"  @click="addRepair">立即报修</tui-button>
		</view> -->
	</view>
</template>

<script>
	var app = getApp()
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				defaltImage: '/static/images/default/default-image.png',
				title: '绑定账号',
				roomId: '',
				password: '',
				code: '',
				userInfo: {
					headImgUrl: '',
					nickname: ''
				},
				type: 0,
				isSend: false,
				disableGetMobileCode: false,
				disableSubmitMobileCode: true,
				getCodeButtonText: '获取验证码',
				isList: false,
				roomList: [],
			}
		},
		methods: {
			imageError: function(e) {
				console.log("imge load error");
				console.log("e:"+e)
			},
			bindLoginMobilecode: function(e) {
				var roomId = this.roomId;
				var openId = '';
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					openId = userInfo.openId;
				}
				var that = this;
				if (!roomId) {
					util.toast('请输入房间编码');
					return
				}
				uni.showLoading({
					title: '提交中...'
				})
				var url = 'system/wx/bindUserAndRoom';

				util.request(url,{
					roomId: roomId,
					openId: openId
				}).then(function(res) {
					if (res.code === 200) {
						util.request('user/userInfo').then(function(res) {
							if (res.code === 0) {
								that.roomId = '';
								uni.setStorageSync('userInfo', res.data);
								that.selectRoomListByOpenId();
							}
						});
					}
				});
			},
			/**
			 * @param {Object} e待处理订单
			 */
			repairList: function(e) {
				var that = this;
				var openId = '';
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					openId = userInfo.openId;
				}
				util.request('repair/repairList',{
					status: 0
				}).then(function(res) {
					if (res.code === 200) {
						that.roomList = res.rows;
						that.roomList.forEach(element =>{
							element.addDate = util.formatDate(element.addDate, 'YYYY-MM-DD');
						});
					}
				});
			},
			
			//
			addRepair: function(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/repair/takeRepair?id='+item.id,
				})
			}
		},

		onLoad: function(options) {
			console.log("onLoad..............")
			//this.repairList();
			
		},
		onShow() {
			console.log("onShow..............")
			this.repairList();
		}
	}
</script>

<style lang="scss">
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25rpx;
    background: linear-gradient(to bottom, $color-default 0%, #fff 100%);
    padding-top: 100rpx;
  }

	.userinfo-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-bottom: 25rpx;
	}

	.userinfo-nickname {
		color: #272727;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	/* 绑定手机号的两个form */

	.login-title {
		margin: 20rpx 0 35rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.login {
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login .first-line {
		height: 80rpx;
		border: 1rpx solid rgb(217, 217, 217);
		border-radius: 40rpx;
		width: 600rpx;
		margin-bottom: 20rpx;
	}

	.login .first-line input {
		padding-left: 20rpx;
		height: 80rpx;
		width: 100%;
	}

	.login .second-line {
		height: 80rpx;
		display: flex;
		width: 600rpx;
		margin-bottom: 50rpx;
	}

	.login .second-line input {
		height: 80rpx;
		width: 350rpx;
		margin-right: 20rpx;
		border: 1rpx solid rgb(217, 217, 217);
		padding-left: 20rpx;
		border-radius: 40rpx;
	}

	.login .second-line button {
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		width: 250rpx;
		font-size: 30rpx;
    background-color: $color-default;
		color: #fff;
		border-radius: 40rpx;
	}

	.login .password-second-line {
		height: 80rpx;
		display: flex;
		width: 600rpx;
		margin-bottom: 50rpx;
	}

	.login .password-second-line input {
		height: 80rpx;
		width: 600rpx;
		border: 1rpx solid rgb(217, 217, 217);
		padding-left: 20rpx;
		border-radius: 5px;
	}

	.third-line {
		margin-left: auto;
		margin-right: auto;
		width: 600rpx;
	}

	.third-line button {
		height: 80rpx;
		font-size: 32rpx;
		background-color: $color-default;
		color: #fff;
	}
	.tui-flex-list {
		display: flex;
	}
	
	.bottom-btn {
		border: 1px solid #f4f4f4;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		padding-bottom: 20rpx;
	}
	.tui-btn-equals {
		display: block !important;
		font-size: 28rpx !important;
	}
</style>
